import { message, Divider, Card, Button, Checkbox } from 'antd';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { history } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ai_icon01 from '@/assets/ai_icon01.png';
import ai_icon02 from '@/assets/ai_icon02.png';
import ai_icon03 from '@/assets/ai_icon03.png';
import ai_icon04 from '@/assets/ai_icon04.png';
import cls from 'classnames';


import style from './index.less';
import { useChuangKetDialog } from './components/ChuangKetDailog';

const Tool: React.FC<{}> = () => {
    const [active, setActive] = useState('全部');
    const tabList = ['全部', '拉新', '卡券', '会员', '裂变', '互动', '其他'];
    const { handleOpen } = useChuangKetDialog()

    const list = [
        {
            name: '优惠券',
            desc: '在线领取优惠券，在线核销'
        },
        {
            name: '限时折扣',
            desc: '组团购买，价格优惠'
        },
        {
            name: '拼团',
            desc: '组团购买，价格优惠'
        },
        {
            name: '砍价',
            desc: '砍价实现营销裂变'
        },
        {
            name: '签到',
            desc: '签到活动相应奖励'
        },
        {
            name: '生日礼品',
            desc: '生日领取生日礼物'
        },
        {
            name: '会员卡',
            desc: '在线办理会员卡，享会员服务'
        },
        {
            name: '充值卡',
            desc: '在线充值，核销，回笼资金'
        },
        {
            name: '积分',
            desc: '消费获取积分，兑换优惠'
        },
        {
            name: '新人有礼',
            desc: '新用户，享受优惠'
        },
        {
            name: '附近小程序',
            desc: '自动推荐小程序给附近用户'
        },
        {
            name: '表单',
            desc: '信息采集，活动报名'
        },
        {
            name: '关注有礼',
            desc: '关注送券，助您大量吸纳新粉'
        },
        {
            name: '节日有礼',
            desc: '节日回馈，有效提升转化'
        },
        {
            name: '进店有礼',
            desc: '门店营销送礼，拉新促活增收'
        },
        {
            name: '全民推广',
            desc: '老客带动新客，客量源源不断'
        },
        {
            name: '分销裂变',
            desc: '二级分销，客户变销售'
        },
        {
            name: '小小果园',
            desc: '浇水种树，收获奖励'
        },
        {
            name: '团购券',
            desc: '发放团购/代金券'
        },
        {
            name: '礼品卡',
            desc: '社交式营销，裂变式传播'
        },
        {
            name: '小程序直播',
            desc: '低门槛开通，锁定私域流量'
        },
        {
            name: '留言板',
            desc: '在线留言，实时互动'
        },
        {
            name: '图文内容',
            desc: '内容营销，更多互动'
        },
        {
            name: '短视频',
            desc: '视频发布，生动有趣'
        },
    ]

    return (
        <PageHeaderWrapper>
            <div className={style['al_wrapper']}>
                <ul className={style['ai_ul']}>
                    <li className={cls(style['ai_li'], style['al_li_text'])} onClick={() => history.push({ pathname: '/marketing/tool/aiText' })}>
                        <img src={ai_icon01} />
                        <div className={style['ai_li_right']}>
                            <div className={style['ai_li_title']}>AI文案生成器</div>
                            <div className={style['ai_li_desc']}>输入你想发布的内容，智能帮你生成专业的宣传文案。</div>
                        </div>
                    </li>
                    <li className={cls(style['ai_li'], style['al_li_hb'])} onClick={handleOpen}>
                        <img src={ai_icon02} />
                        <div className={style['ai_li_right']} >
                            <div className={style['ai_li_title']}>AI智能海报设计</div>
                            <div className={style['ai_li_desc']}>输入文字和图片，智能生成各种类型的宣传海报设计。</div>
                        </div>
                    </li>
                    <li className={cls(style['ai_li'], style['al_li_video'])} onClick={() => history.push({ pathname: '/marketing/tool/aiVideo' })}>
                        <img src={ai_icon03} />
                        <div className={style['ai_li_right']}>
                            <div className={style['ai_li_title']}>AI视频生成器</div>
                            <div className={style['ai_li_desc']}>输入你想发布的内容，智能帮你生成专业的宣传视频。</div>
                        </div>
                    </li>
                    <li className={cls(style['ai_li'], style['al_li_img'])} onClick={() => history.push({ pathname: '/marketing/tool/aiImage' })}>
                        <img src={ai_icon04} />
                        <div className={style['ai_li_right']}>
                            <div className={style['ai_li_title']}>AI绘图</div>
                            <div className={style['ai_li_desc']}>输入文字，智能生成绘图。</div>
                        </div>
                    </li>
                </ul>
                <div className={style['ai_content']}>
                    <ul className={style['ai_tab_list']}>
                        {
                            tabList.map(it =>  {
                                return (
                                    <li className={cls({
                                        [style['ai_tab_li']]: true,
                                        [style['ai_tab_li_active']]: active === it
                                    })}>
                                        {it}
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <ul className={style['ai_c_list']}>
                        {
                            list.map(it => {
                                return (
                                    <li className={style['ai_c_li']}>
                                        <div className={style['ai_c_name']}>{it.name}</div>
                                        <div className={style['al_c_desc']}>{it.desc}</div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        </PageHeaderWrapper>
    );
};

export default Tool;
